웹 폼 디자인

Form Structure

Chapter 1. The Design of Forms

Form design matters:

When you’re in shopping in a local store, checkout usually comes with a smile. … Browsing for products on the ecommerce site, eBay Express, is fun. Checking out, on the other hand, is a form. …

Unpacking a new Apple MacBook Pro is a tactile, engaging experience that reflects the quality of the product inside. … Vox looks like a fun social network but if you want to join, you’ll need to fill out this new account form, which isn’t fun at all. —p4-8

The impact of form design:

Increased completion rates of 10-40 percent were not uncommon in many of the form redesign projects I’ve been part of. And when form completion means new sales or new customers, it’s easy to see how improvements in form design can amount to substantial increases in revenue. —p10

Design principles:

Design principles are the guiding light for any solution. They articulate the fundamental goals that any solution should embody. In the case of Web form design, the principles I continually strive for are:

Minimize the pain: People want what lies on the other side of a form so the process of completing forms should be as simple and easy as possible.

Illuminate a Path to Completion: Since the point of just about every form is to get in filled in, make it abundantly clear how people can accomplish that goal.

Consider the Context: Forms rarely exist in a vacuum. They are almost always part of a broader context (audience, application, business), which informs how they’ll be used.

Ensure Consistent Communication: Forms broker conversations betwwen customers and companies. Althought an organization can have many groups taking part in these conversations (marketing, privacy, engineering, design, business, etc.), a form needs to speak with one voice. —p19

Chapter 2. Form Organization

Best Practices:

Take the time to evaluate every question you are adding to your forms. Be vigilant about removing everything that isn’t necessary.

Strive for succinctness in all the questions (labels) you ask in your forms.

When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer.

Ensure that your forms speak with one voice, despite questions from several different people or departments.

Organize the content on your forms into logical groups to aid scanning and completion.

When possible, structure your forms as a conversation. Natural breaks between topics will emerge that can help you organize your form.

If a form naturally breaks down into a few short topics, a single Web page is likely to be a good way to organize the form.

When a form contains a large number of questions that are only related by a few topics, multiple Web pages are probably a good way to organize the form.

When a form contains a large number of questions related to a single topic, one log Web page is generally a good way to organize the form.

Consider asking optional questions only after a form is completed. Changes are you’ll get more answers than if these questions were part of the initial form.

Consider using Web convention surveys to discover patterns in how forms are organized on specific kinds of sites.

Use the minimal amount of visual information necessary to distinguish content groups.

Use initial capital letters to make the titles of content groups easier to scan. —p37

Chapter 3. Path to Completion

Best Practices:

Ensure that the titles of your forms match people’s expectations and succinctly explain what each form is for.

For forms requiring substantial time or information requiring look-up, use a start page to set people’s expectations.

Make sure that you illuminate a clear path to completion through a form by using clear scan lines and effective visual pacing that comfortably takes people from start to finish.

For mission-critical forms like checkout or registration, remove distractions and any links or content that may lead to form abandonment.

For forms with a known sequence of multiple Web pages, include progress indicators that communicate scope, status, and position.

For forms without a clear sequence of pages, do not include progress indicators or use more general progress indicators instead of those that set incorrect expectations.

Consider the experience of “tabbing” through a form when making form layout decisions.

Use the “tabindex” HTML attribute to control tabbing order through a form. —p54

Form Elements

Chapter 4. Labels

Top aligned labels:

One of the reasons top-aligned forms are completed quickly may be because they only require a single eye fixation to take in both input label and input field. In fact, an eye-tracking study by Matteo Penzo from July 2006 found that moving from label to input required just 50 milliseconds. That’s 10 times faster than left-aligned labels, which required a medium duration of 500ms and twice as fast as right-aligned labels, which required up to 240ms.

The results of live site testing across several different geographics have also supported top-aligned labels as the quickest way to get people through forms. These studies also had higher completion rates (over 10 percent higher) than the left-aligned versions of forms they were tested against.

—p57-59

Best Practices:

Web form labels should use succinct, natural language and consistent capitalization to make answering the questions they pose as easy as possible.

When you are trying to reduce completion times or if you need flexible label lengths for localization, consider top-aligned labels.

When you have similar goals but vertical screen real estate constraints, consider right-aligned labels.

When your form requires people to scan labels to learn what’s required or to answer a few specific questions out of many, consider left-aligned labels.

When you are under extreme space constraints for very short forms, labels within inputs may be a good solution. Just ensure that you have the right interactions and context in place.

Make sure that you distinguish clearly between labels and data, especially when using labels within input fields.

When considering different label alignment for different label alignments for different forms in a single application, think through the context versus consistency trade-off.

Different label alignments in a single form will disrupt a clear path to completion and may confuse people.

—p65

Chapter 5. Input Fields

Best Practices:

Use the right input field for the type of question you are asking: Does it require a yes or no answer; a selection from mutually exclusive options; etc.?

Where possible, ensure that field lengths provide meaningful affordances that help people answer questions effectively.

Otherwise, utilize a consistent length that provides enough room for correct answers.

Try to avoid optional input fields in forms.

If most of the inputs on a form are required, indicate the few that are optional.

If most of the inputs on a form are optional, indicate the few that are required.

When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.

If you do use * to indicate required fields, don’t forget a legend that explains what it indicates.

Associate required or optional indicators with input labels to give people an easy way to see which questions need to be answered.

If there’s a natural structure among input fields that provides a valuable clue on how to answer a question, look for ways to group these inputs visually to clearly communicate that structure.

When there’s clearly more than one way to format an answer correctly, consider using a flexible input field.

Ensure that flexible inputs don’t make providing easy answers more difficult. —p87

Chapter 6. Actions

Best Practices:

Avoid secondary actions on forms whenever possible. Provide people with a single path to completion.

If secondary actions are required, ensure that there is a clear visual distinction between the primary and secondary actions.

When you are distributing the questions in a form across multiple Web pages, primary actions move people closer to completion and secondary actions allow them to go back.

Align primary actions with input fields to create a clear path to completion.

If you do choose to include potentially destructive secondary actions like Reset or Clear in your form, provide people with an easy way to undo them.

Clearly communicate when a form is being processed to avoid duplicate submissions.

Don’t rely on help text urging people not to hit a primary action twice; instead, disable the primary action button and prevent them from doing so.

Consider opportunities to streamline legal requirements by combining terms of service agreements with primary actions. —p102

Chapter 7. Help Text

Best Practices:

Don’t use help text to compensate for the shortcomings of your forms. Striving to minimize the amount of help text on your forms will push you toward better design solutions.

Help text is best for explaining unfamiliar data requests, such as why certain questions are being asked, security and privacy concerns, recommended ways of providing answers, and indicating optional answers.

Concise help text visible and adjacent to the question being asked provides the most clarity for people.

Help text within input fields should only be used to provide recommended ways of answering questions.

If your form is asking questions people have answers for but may be unsure how or why they should answer, consider using an automatic inline help system.

If your form is asking unfamiliar or complex questions, and is likely to be reused by the same people multiple times, consider using a user-activated help system.

Unless you have a lot of help text or content(graphics, charts), for each question being asked, use an inline system that avoids page-jumping and rollover problems.

If you do have a lot of help content, use a consistent help section instread of an in-line solution.

Be as specific as you can with help text. If help text applies to a group of related input fields instead of individual inputs, consider devoting a portion of the page to displaying help to communicate a clear association between the group of fields and the help text.

Triggers for user-activated help text, such as icons, links, or buttons, should be placed next to labels and not input fields.

When asking for sensitive information, consider including actionable help text that aloows people to confirm that their information is safe. —p118

Chapter 8. Errors and Success

Best Practices:

Clearly communicate when an error is blocking someone from completing a form. Error messages are arguably the most important element on a form when present. Make sure they appear that way!

Display error messages in context so they can be resolved quickly.

Provide actionable remedies that enable people to resolve errors easily.

Top-level error messages should indicate an error has occurred and how it can be resolved. If multiple errors exist, they should be listed in the top-level message.

If any input fields are responsible for an error, clearly mark them with a double visual emphasis to ensure they are noticeable.

Visually associate any responsible form elements with a top-level error message to clearly communicate they need to be resolved in order to continue.

Reserve red text and warning icons for error messages.

On short forms, it may be possible to omit either a top-level message or indicators for resposbile input fields. If you choose this approach - do so thoughtfully.

Clearly communicate when a form has been completed successfully and what happened as aresult using success messages.

Provide success messages in context so as not to block any further progress.

Consider dynamic success messages to highlight the results of a successfull form submission.

Avoid success message page dead ends. —p137

Form Interaction

Chapter 9. Inline Validation

Best Practices:

Consider using inline validation to confirm or suggest valid answers and to help people stay within limits.

Inline confirmation works best for questions with potentially high error rates or specific formatting requirements.

Inline suggestions work best when there is a large set of valid answers people can pick from.

Inline quality indicators can guide people to better answers to complex questions.

When validating people’s answers inline, do so after they have finished providing an answer, not during the process.

If you need to change people’s responses into a specific format, make sure you do so after they have finished providing an answer, not during the process.

When input limits exist, communicate their boundaries using real-time, dynamic updates. —p149

Chapter 10. Unnecessary Inputs

Best Practices:

Carefully examine all the questions being asked in your form for opportunities to eliminate unnecessary inputs.

Look for patterns in how people answer questions that allow you to infer answers accurately.

Be mindful not to complicate questions for the sake of removing inputs.

Smart defaults can help people answer questions by putting default selections in place that serve the interests of most people.

Because people are likely to leave default selections in place, ensure they align with most people’s goals.

Whenever possible, include a default selection in a set of radio buttons. If no clear default exists, changes are that people will still understand they need to make a chice. But if they don’t they’ll get an error.

Personally relevant default selections enable return customers to complete forms faster because their answers are “sticky.”

Think through where personalized defaults make sunse. It won’t be every input on every form. —p160

Chapter 11. Additional Inputs

Best Practices:

Additional Inputs can be used to provide added or advanced options to the people who need them without getting in the way of people who don’t.

You should map additional inputs to prioritized customer needs. Primary use cases should be up front and visible; secondary use cases may be a click away.

Additional inputs are usually more welcome when invoked by people (user-activated) than when automatically surfaced.

Ensure that the actions that trigger additional options are clearly worded. If additional options are triggered automatically, try to provide a clue (icon, text) that sets expectations.

Within a single form, try to maintain a consistent approach to additional inputs.

If you need to expose a large number of additional inputs, consider using an overlay instead of exposing them inline to avoid page jumping and disorientation.

Ensure that overlays don’t cover the input fields they are helping people fill in so people can still enter an answer on their own.

When additional options need to be considered in isolation, consider using a modal overlay.

Make sure that there are clear ways to close or cancel a modal overlay and return to the form.

Show the choices made in additional input overlays to people when they return to the form.

When your primary goal is to engage customers, additional inputs can be captivating way to step people through choices. —p173

Chapter 12. Selection-Dependent Inputs

Best Practices:

Well, I warned you that selection-dependent inputs have lots of considerations, didn’t I? Now that we’re through that deluge of data, what have we learned?

Page-level selection-dependent inputs are probably your best bet when the number of additional options for each initial choice is large. Though you need two Web pages to break up the form, the dynamic hiding and showing of additional inputs won’t confuse people, and they won’t need to question whether or not their choices are mutually exclusive.

Vertical and horizontal tabs actually perform quite well in all-around usability, satsfaction, and eye-tracking metrics but come with the gnarly problem of mutual exclusivity. I’ve gotten conflicting data on which of these options resolves this issue so they both seem to be stuck with it. If you can get around mutual exclusivity through clever interaction or visual design, good performance is yours to be had with these solutions.

When you have a long list of initial options (more than 4 or 5) each with its unique set of selection-dependent inputs, using a drop-down list and visual grouping for the additional options is likely a good way to go.

If you only have a few additional inputs for each initial options, exposed below radio buttons or exposed within radio buttons might be your best option. I’ve seen both of these options cause confusion with excessive page jumping and disassociation between initial choices, so tread carefully. But if you really only have 1-3 additional fields per initial choice, i’d go with exposed inline radio buttons. Just make sure you use clear visual associations and transitions, if possible.

All options exposed as inactive or all options exposed are basically nonstarters because people are quickly overwhelmed by too many options that don’t map to their goals.

Overall, hiding irrelevant form controls from people until they need them results in forms that are easy on the eyes and completed quite quickly.

Overall, displaying initial options and their selection-dependent inputs in close proximity to one another seems to lead to high satisfaction ratings.

In all cases, maintain a clear association between the initial selection options. Don’t let people lose sight of their initial top-level choice.

In all cases, clearly associate selection-dependent inputs with their trigger. All the examples outline in this section do so with either yellow backgrounds or gray outlines.

In all cases, avoid excessive page jumping that disassociates selection-dependent inputs from the initial set of options. —p192-193

Chapter 13. Gradual Engagement

Best Practices:

When planning a customer’s initial experience for your Web service, think about how you can avoid sign-up forms in favor of gradual engagement.

If you do opt for a gradual engagement solution, ensure that it gives potential customers an understanding of how they can use your service and why they should care.

If you choose to auto-generate accounts for potential customers, ensure there is a clear way for them to access their account. Changes are that people will either ignore or not see account creation emails, and may be uncertain if they have an account or not.

Avoid gradual engagement solutions that simply distribute the various input fields in a sign-up form across multiple pages. It’s a good possibility that this will reduce efficiency and not delight anyone. —p206

Chapter 14. What’s Next

The Disappearing Form (p208)

The Changing Form (p209)